HTML查漏补缺

HTML规范

HTML规范文档
H4时代被规定为错误的行为，在H5时代全都被合理化了，比如标签不区分大小写、只有开始标签没有结束标签、属性值不带引号等等错误，H5全部允许它们存在

遗漏的标签知识

<title>标签定义文档的标题，它是 head 部分中唯一必需的元素
<address>标签
- 该标签定义文档或文章的作者/拥有者的联系信息
- 不应该用于描述通讯地址，除非它是联系信息的一部分
- 这个元素不能包含除了联系信息之外的任何信息，比如出版日期（这应该包含在<time>元素中）。
应该使用 <h1> - <h6> 来表示标题，使用<em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。
<base>标签
- 该标签用于指定一个文档中包含的所有相对URL的基本URL
- 通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对URL中缺少的部分，使用 <base> 标签后，浏览器将不再使用当前文档的 URL，而使用<base>标签中指定的基本 URL 来解析所有的相对URL，包括 <a>、<img>、<link>、<form> 标签中的 URL
- 在一个文档中，最多能使用一个 <base> 元素
- 一般把 <base> 标签排在 head 元素中第一个元素的位置，这样 head 中其他元素就可以利用 <base>元素中的信息了
<bod>标签
- 该标签用于覆盖当前文本的朝向，它使得字符按给定的方向排列
<button>标签与<input type="button">
- 如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容；所以为了避免提交不同的值，在 HTML 表单中最好使用 input 元素来创建按钮
- 使用button元素与使用 input 元素创建的按钮之间的不同之处在于：在<button> 与 <button/>之间，可以放置内容，比如文本或图像
- 使用 input 元素来创建按钮请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。
<caption >标签
- 该标签定义表格标题，必须紧随 table 标签之后。
- 只能对每个表格定义一个标题，通常这个标题会被居中于表格之上
<cite> 标签
- 通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题
- 它可以使你或者其他人从文档中自动摘录参考书目，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示（当然需要通过写相应的程序来处理）
- 该标签体现了语义化的便利
<details>标签和<summary> 标签
- <summary> 标签为 details 定义标题
- 标题是可见的，用户点击标题时，会显示出 details
<meter>标签
- 该标签定义已知范围或分数值内的标量测量，比如说表示3/10
- 注意表示进度不应该用该标签而是<process>标签
<figure> 标签与<figcaption> 标签
- <figure>标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
- <figcaption> 标签定义 figure 元素的标题，<figcaption> 标签应该被置于figure元素的第一个或最后一个子元素的位置
<template>标签
- 该标签可以定义html片段，但是不会被渲染
- 可以通过js来将片段显示到页面上
<table>标签
- 单元格默认平分table的宽度, table决定了整个表格的宽度
- 不设置单元格宽高时，宽高由内容撑开;
- 只设置高度时，内容撑开宽度，当宽度不可再变时，将会撑开高度;
- 只设置宽度时，内容只撑开高度;
- 当宽高均设置时，内容可以只撑开表格高度，而不能撑开宽度
- table里面的单元格的宽度会转换成百分比，当单元格宽度和超过table的宽度是不会溢出的，而是会撑开高度
<link>标签
- 定义文档与外部资源的关系
- rel = stylesheet，链接外部样式表
- rel = dns-prefetch，dns预解析（异步）
- rel = prefetch，预加载图片等（异步）
- rel = prerender，预渲染（异步）
- rel = icon，定义title图标
- rel = alternate，定义文档的替代版本（比如打印页、翻译或镜像），可做RSS。
- ........见W3C

课后小验证

HTML是什么，HTML5是什么
- HTML是超文本标记语言（Hyper Text Markup Language）
- 是用来描述网页的一种标记语言，而不是编程语言；标记语言是一套标记标签
- 与XML的区别：HTML的设计宗旨是显示数据，而XML的设计宗旨是传输数据；HTML的标签是预定义的，而XML的标签是使用者自己定义的
- HTML5是最新的 HTML 标准，拥有新的元素，更丰富的内容，更强大的适配性
HTML元素标签、属性都是什么概念？
- HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，开始标签与结束标签之间的内容是HTML元素的元素内容
- HTML元素标签就是指一个HTML元素的开始标签和结束标签，浏览器不会直接显示标签，但是会使用这些标签来解释页面的内容
- HTML元素属性提供了有关HTML元素的更多的信息，比如图片的URL，元素的类名等
文档类型是什么概念，起什么作用？
- Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
- HTML文档中使用<!DOCTYPE>声明帮助浏览器正确地显示网页，<!DOCTYPE>声明告诉了浏览器当前的HTML文档是用什么HTML版本编写的，这样浏览器才能完全正确地显示出 HTML 页面
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，且要注意它不属于HTML标签
- 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于标准通用标记语言（SGML）。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容
- HTML5 不基于 SGML，所以不需要引用 DTD
meta标签都用来做什么的？
- 提供有关页面的元信息，常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
- charset属性规定文档的编码方式，建议为UTF-8
- content属性定义与 http-equiv 或 name 属性相关的元信息
- http-equiv属性把对应的 content 属性关联到 HTTP 头部。
```
* `content-type`：用于指定内容类型，默认为`text/html`
* `refresh`: 设置文档多久刷新一次
* `default-style`：指定首选的样式表
```
- name属性把对应的 content 属性关联到一个名词。
```
* `author`
* `description`
* `generator`
* `keywords`
* `viewport`：控制页面的尺寸和比例，以便响应式
```
- meta标签是可扩展的，各浏览器产商可以自己定义一些特定的内容
```
*  `http-equiv = "X-UA-Compatible" content = "IE = edge"`：为 `IE8` 指定不同的页面渲染模式
* `name = "format-detection" content="telphone = no"`：关闭`iOS`电话号码自动识别
* `name = "renderer" content = "webkit"`：`360`浏览器指定内核
```
Web语义化是什么，是为了解决什么问题
- Web语义化简单的说就是在编写HTML文档时，选择合适的标签将内容本身进行合理的描述，而不去管它的样式，使页面有良好的结构，页面元素有含义；同时对于类名、id名称也要命名的能够描述内容；从而能够让人和机器都容易理解（提升可读性、可维护性）
- Web语义化在方便开发人员阅读代码同时也有利于让机器（搜索引擎，爬虫）读懂文档内容，从而利用机器来对索引好的内容作各种处理和挖掘，比如SEO（搜索引擎优化）
- Web语义化在抛开CSS的情况下，页面也能呈现出清晰的结构
- Web语义化可以方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以更合适的方式来渲染网页（提高无障碍性）
- Web语义化有利于SEO
链接是什么概念，对应什么标签？
- 指从一个网页指向一个目标的连接关系
- 对应<a>标签，<link>标签，<script>标签，<area>标签

表单标签都有哪些，对应着什么功能，都有哪些属性

标签	功能
form	表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息
fieldset	将表单内的相关元素分组
fieldset	为 fieldset 元素定义标题
button	表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方
input	用于为基于Web的表单创建交互式控件，以便接受来自用户的数据
textarea	表示一个多行纯文本编辑控件
option	用于定义在<select>, <optgroup> 或<datalist> 元素中包含的项。<option> 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项
optgroup	会创建包含在一个 <select> 元素中的一组选项
select	是一种表单控件，可创建选项菜单。菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。
datalist	与input元素结合来定义选项列表，包含了一组<option>元素,这些元素表示input的合法值
meter	用来显示已知范围的标量值或者分数值
process	用来显示一项任务的完成进度
output	表示计算或用户操作的结果
label	表示用户界面中项目的标题

ol, ul, dl, dd, dt等这些标签都适合用在什么地方，举个例子
- ol为有序列表，适用于有顺序的列表，比如说排行榜
- ul为无序列表，适用于不在意顺序的列表，比如说菜单
- dl为定义列表，dt是定义列表的标题，dd是定义列表的具体描述，比如说术语解释表
如何提升无障碍性
- 为 img 提供 alt 属性
- noscript
- input 和 label 对应
- 图形验证码与语音验证码
- 文字和背景有足够对比度
- 键盘可操作
- 语义化
JSON-LD
- JavaScript Object Notation for Linked Data
- 是一种基于JSON表示和传输互联数据（Linked Data）的方法
- 结构化数据就是按一定的结构产生的一系列描述你网站内容的信息，它能帮助搜索引擎的爬虫更好地了解你网页中所要展现的内容，并在搜索结果中有更丰富得展现，而非千篇一律的链接，即提高搜索排名，美化搜索结果。它还能够被其他一些应用所读取使用，比如：Gmail, Facebook, Twitter 等，甚至还可以是 Siri，可穿戴设备，或是车载导航系统。
- JSON-LD与互联数据(Linked Data)
- 示例
```
<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Person",
      "name": "John Doe",
      "jobTitle": "Graduate research assistant",
      "affiliation": "University of Dreams",
      "additionalName": "Johnny",
      "url": "http://www.example.com",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "1234 Peach Drive",
        "addressLocality": "Wonderland",
        "addressRegion": "Georgia"
      }
    }
</script>
```

HTML查漏补缺

HTML规范

遗漏的标签知识

课后小验证

Cshine

引用和评论

前端基础知识

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

一个简易的DIY场景H5框架